class MoonElement extends Element {
  constructor(layoutNode, ctx) {
    super(layoutNode, ctx)
  }

  draw() {
    let { react, style, attrs } = this.layoutNode
    // let initConfig = {
    //   num: 5,
    //   R: react.width,
    //   r: react.width / 2,
    //   x: react.left,
    //   y: react.top,
    //   rotate: 45,
    //   fillStyle: '#FCFA31',
    //   lineJoin: 'round',
    //   bw: 2,
    //   lineCap: '',
    //   fill: 'false',
    //   stroke: 'true',
    // }
    // this.drawMoon(Object.assign(initConfig, attrs))
  }
  /**
   * 绘制月亮
   * @param d
   */
  drawMoon(d, x, y, R, rot, fillColor) {
    this.ctx.save()
    this.ctx.translate(x, y)
    this.ctx.scale(R, R)
    this.ctx.rotate((Math.PI / 180) * rot)
    this.moonPath(d)
    this.ctx.fillStyle = fillColor

    this.ctx.fill()
    this.ctx.restore()
  }
  moonPath(d) {
    this.ctx.beginPath()
    this.ctx.arc(0, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true) //绘制外面的弧
    this.ctx.arcTo(d, 0, 0, 1, this.distance(0, -1, d, 0) / d) //绘制里面的弧
  }
  distance(x1, y1, x2, y2) {
    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))
  }
}
